I am building image transition with a custom shader and for this i need a fragment.glsl. But when importing this file into my .js, this error shows up:
Compiled with problems:
ERROR in ./src/shaders/fragment.glsl 1:13
Module parse failed: Unexpected token (1:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> void main () {
|
| }
For a fast start i am using this webpack boilerplate: https://github.com/taniarascia/webpack-boilerplate
Because of my not existing experience in webpack and glsl files i dont know whats wrong. I am assuming, that the browser is not able to read the file. I tried a lot of stuff with webpack.config.js and modules like glfl-loader but looks like my browser got other plans.
After testing around i found the solution:
i had to edit this to the webpack.config.js
// Shader
{ test: /\.(glsl|vs|fs|vert|frag)$/, type: 'asset/source',generator: { filename: 'assets/images/[hash][ext]' }}